<template>
  <div>
    <el-tabs v-model="activeName" type="card"   size="small">
      <el-tab-pane label="交易明细" name="first">
        <GpBaseTable   primary-key="id" :columns="trDetailsColumns"
                       ref="trDetailsTable"
                       :form-data="formData"
                       url="/xcdhTrading/day-transaction-data/v2/listByPage"
                       sync-data-url="/xcdhTrading/day-transaction-data/syncTransactionData">
        </GpBaseTable>
      </el-tab-pane>
      <el-tab-pane label="游资" name="second" :disabled="true">
        <GpBaseTable   primary-key="id" :columns="hotMoneyColumns"
                       :mounted-load="false"
                       ref="hotMoneyTable"
                       url="/xcdhTrading/hotMoneyTrc/v2/listByPage"
                       :params="getHotMoneyParam"
                       sync-data-url="/xcdhTrading/hotMoneyTrc/syncHotMoneyTrc">
        </GpBaseTable>
      </el-tab-pane>
      <el-tab-pane label="个股资金流向" name="third" :disabled="true">
        <GpBaseTable   primary-key="id" :columns="capitalFlowColumns"
                       :mounted-load="false"
                       ref="capitalFlowTable"
                       url="/xcdhTrading/capitalFlow/v2/listByPage"
                       :params="getHotMoneyParam"
                       sync-data-url="/xcdhTrading/capitalFlow/syncCapitalFlow">
        </GpBaseTable>
      </el-tab-pane>

    </el-tabs>


  </div>
</template>

<script>
import http from "network/http";

export default {
  name: "trDetail" ,
  data(){
    return {
      formData:{tradeDate: ""} ,
      activeName: "first" ,
      tsCodes: [],
      currRow: null ,
      trDetailsColumns: [
        {
          "title": "交易日期",
          search: true ,
          "key": "tradeDate",
          is: "el-date-picker" ,
          attrs:{
            "value-format":"yyyy-MM-dd"
          }
        },
        {
          "title": "股票名称",
          search: true ,
          op: 'LIKE' ,
          "key": "name"
        },
        {
          "title": "收盘价",
          "key": "showPrice",
          tableIs: "ShowGpPrice"
        },
        {
          "title": "涨跌幅",
          "key": "pctChg",
          tableIs: "NumberColumn"
        },
        {
          title: '游资个数',
          key: "hotNum",
        },
        {
         title: '主力个数',
         key: "mainForceNum",
        },
        {
          "title": "成交额",
          "key": "amount",
          unit:"千",
          tableIs: "BigNumberColumn"
        },
        {
          "title": "成交量",
          "key": "vol",
          tableIs: "TurnoverNumberColumn"
        },
        {
          title: '操作' ,
          type: 'action',
          attrs:{
            width: 230
          },
          buttons: [
            {
              is: 'el-button' ,
              title: '跟踪游资',
              attrs: {
                type: 'text'
              },
              click:(row)=>{
                this.currRow = row
                this.toTrade('hotMoneyTable' , "second")
              }
            },
            {
              is: 'el-button' ,
              title: '跟踪主力',
              attrs: {
                type: 'text'
              },
              click:(row)=>{
                this.currRow = row
                this.toTrade('capitalFlowTable' , "third")
              }
            }
          ]
        }
      ],
      capitalFlowColumns:[
        {
          "title": "交易日期",
          "key": "tradeDate",
          is: "el-date-picker" ,
          attrs:{
            "value-format":"yyyyMMdd"
          }
        },
        {
          "title": "股票名称",
          "key": "name"
        },
        {
          "title": "涨跌幅",
          "key": "pctChange",
          tableIs: "NumberColumn"
        },
        {
          "title": "收盘价",
          "key": "showPrice",
          tableIs: "ShowGpPrice"
        },
        {
          key: 'totalAmount',
          "title": "总净额",
          tableIs: "BigNumberColumn",
          unit: '万'
        },
        {
          "title": "主力净流入额（万元）",
          "key": "netAmount",
          tableIs: "BigNumberColumn",
          unit: '万'
        },
        {
          "title": "超大单净流入额（万元）",
          "key": "buyElgAmount",
          tableIs: "BigNumberColumn",
          unit: '万'
        },
        {
          "title": "大单净流入额（万元）",
          "key": "buyLgAmount",
          tableIs: "BigNumberColumn" ,
          unit: '万'
        },
        {
          "title": "中单净流入额（万元）",
          "key": "buyMdAmount",
          tableIs: "BigNumberColumn",
          unit: '万'
        },
        {
          "title": "小单净流入额（万元）",
          "key": "buySmAmount",
          tableIs: "BigNumberColumn",
          unit: '万'
        }
      ],
      hotMoneyColumns: [
        {
          "title": "交易日期",
          "key": "tradeDate",
          is: "el-date-picker" ,
          attrs:{
            "value-format":"yyyyMMdd"
          }
        },
        {
          "title": "股票名称",
          op: 'LIKE' ,
          "key": "tsName"
        },
        {
          "title": "买入金额（元）",
          "key": "buyAmount",
          tableIs: "BigNumberColumn" ,
        },
        {
          "title": "卖出金额（元）",
          "key": "sellAmountAbs",
          tableIs: "BigNumberColumn" ,
        },
        {
          "title": "净买卖（元）",
          "key": "netAmount",
          tableIs: "BigNumberColumn" ,
        },
        {
          "title": "游资名称",
          "key": "hmName"
        }
      ],
    }
  },
  created() {
    this.getNewTradeDate()
  },
  methods:{
    getHotMoneyParam(){
      return [
        {
          key: 'tsCode' ,
          op: 'IN',
          value: this.tsCodes
        }
      ]
    },
    toTrade(tableId , to){
      this.activeName = to ;
      let row = this.currRow
      this.tsCodes = [row.tsCode]
      this.$nextTick(()=>{
        this.$refs[tableId].handlerQueryListByPage(
            [
              {
                key: 'tsCode' ,
                op: 'EQ',
                value: row.tsCode
              },
              {
                key: 'tradeDate' ,
                op: 'EQ',
                value: this.tradeDateCode
              }
            ]
        )
      })
    },
    getNewTradeDate(){
      http.post("/xcdhTrading/stock-info/newTradeDate").then(res=>{
        this.formData.tradeDate = res.data.tradeDate
        this.tradeDateCode = res.data.tradeDateCode
      })
    },
  }
}
</script>

<style scoped>

</style>
